import { reactive, ref } from 'vue';

import { useStore } from '@/store/listStore';

export const useListData = () => {
  const todoStore = useStore();
  const newlist = ref(todoStore.newlist);
  const lists = ref(todoStore.lists);
  const message =ref(todoStore.message)
  const addlist = () => {
    todoStore.addlist(newlist.value);
    newlist.value = '';
    console.log(lists.value);
  };
  const deletelist = (index: number) => {
    todoStore.deletelist(index);
    lists.value = todoStore.lists;
  };
  const changelist = ( index: number) => {
    todoStore.changelist(index)
  }
  const savelist = (index:number , message:string) =>{
    todoStore.savelist(index,message)
  }
  const finishButton = () => {
    todoStore.active = !todoStore.active;
    console.log("active:", todoStore.active)
  }
  return {
    newlist,
    lists,
    message,
    todoStore,
    addlist,
    deletelist,
    changelist,
    savelist,
    finishButton,
  }
}

